<template>
  <div class="m-main">
    <el-row type="flex">
      <el-col justity="start">
        <el-button-group>
          <el-button type="primary" @click.stop="handleOpenDialog('加载元数据','genData')">加载元数据</el-button>
          <el-button type="primary" @click.stop="handleOpenDialog('修改基本信息','base')">修改基本信息</el-button>
         <el-button type="primary" @click.stop="handleOpenDialog('加载Swagger元数据','swagger')">加载Swagger元数据</el-button>
        </el-button-group>
      </el-col>
      <el-col justity="end" class="right">
        <el-button type="text" @click.stop="handleCopy" icon="el-icon-document-copy">复制JSON</el-button>
        <el-button type="text" @click.stop="openDrawer('查看JSON')" icon="el-icon-view">查看JSON</el-button>
        <el-button type="text" @click.stop="handleClear" icon="el-icon-delete">清空</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div>
       <el-row>
         <el-col :span="6">模块名：{{genData.moduleName}}</el-col>
         <el-col :span="6">表名称：{{genData.table.tableName}}</el-col>
         <el-col :span="6">表说明：{{genData.table.remark}}</el-col>
         <el-col :span="6">布局类型：{{layoutType}}</el-col>
       </el-row>
      </div>
    </el-card>
    <avue-crud 
    :data="tableData" 
    :option="option" 
    v-model="columnForm" 
    :before-open="handleBeforeOpen"
    @row-save="handleRowSave"
    @row-update="handleRowUpdate"
    @row-del="handleRowDel"></avue-crud>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <avue-form v-if="dialogView === 'genData'" v-model="form" :option="formOption" @submit="handleSubmit"></avue-form>
      <avue-form v-else-if="dialogView === 'base'" 
      v-model="form" 
      :option="baseFormOption" 
      @submit="handleSubmitBase"></avue-form>
    </el-dialog>
    <el-drawer
      :title="drawerTitle"
      size="50%"
      :visible.sync="drawer">
      <div class="code">
        <pre>{{content}}</pre>
      </div>
      </el-drawer>
  </div>
</template>

<script>
import * as genService from '@/api/gen'
export default {
  name: "wel",
  data() {
    let yesNo = [
      {
        label: '是',
        value: true
      },
      {
        label: '否',
        value: false
      }
    ]
    let searchType = [
      {
        label: '等值查询',
        value: 'EQ'
      },
      {
        label: '模糊查询',
        value: 'LIKE'
      }
    ]
    let formType = [
      {
        label: '单行文本',
        value: 'TEXT'
      },
      {
        label: '多行文本',
        value: 'TEXTAREA'
      },
      {
        label: '密码框',
        value: 'PASSWORD'
      },
      {
        label: '枚举字典',
        value: 'DICT'
      },
      {
        label: 'db字典',
        value: 'DB_DICT'
      },
      {
        label: '远程字典',
        value: 'REMOTE_SELECT'
      },
      {
        label: '日期(yyyy-MM-dd)',
        value: 'DATE'
      },
      {
        label: '日期时间(yyyy-MM-dd HH:mm:ss)',
        value: 'DATETIME'
      },
      {
        label: '单图上传',
        value: 'IMAGE'
      },
      {
        label: '多图上传',
        value: 'IMAGES'
      },
      {
        label: '附件上传',
        value: 'ATTACHMENT'
      },
      {
        label: '多附件上传',
        value: 'ATTACHMENTS'
      },
      {
        label: '图标选择器',
        value: 'INPUT_ICON'
      },
      {
        label: '树形选择器',
        value: 'TREE'
      },
      {
        label: '富文本',
        value: 'EDITOR'
      }
    ]
    return {
      form: {},
      dialogVisible: false,
      dialogView: 'genData',
      drawer: false,
      drawerTitle: '导入JSON',
      dialogTitle: '',
      columnForm: {},
      genData: {
        table: {}
      },
      // 加载元数据表单
      formOption: {
        column: [
          {
            label: '表名称',
            prop: 'tableName',
            value: 'sys_notice',
            rules: [
              { required: true, message: '表名称不能为空', trigger: "blur" }
            ]
          }
        ]
      },
      // 修改基本信息表单
      baseFormOption: {
        column: [
          {
            label: '模块名',
            prop: 'moduleName',
            rules: [
              { required: true, message: '模块名不能为空', trigger: "blur" }
            ]
          },
          {
            label: '表名称',
            prop: 'tableName',
            rules: [
              { required: true, message: '表名称不能为空', trigger: "blur" }
            ]
          },
          {
            label: '备注',
            prop: 'remark',
            rules: [
              { required: true, message: '备注不能为空', trigger: "blur" }
            ]
          },
          {
            label: '布局类型',
            prop: 'layoutType',
            type: 'select',
            value: 'TABLE',
            rules: [
              { required: true, message: '布局类型为空', trigger: "blur" }
            ],
            dicData: [
              {
                label: '普通表',
                value: 'TABLE'
              },
              {
                label: '树型',
                value: 'TREE'
              },
              {
                label: '左树右表',
                value: 'LINK_TREE'
              },
              {
                label: '父子表',
                value: 'LINK'
              }
            ]
          },
        ]
      },
      tableData: [],
      option: {
        height: '500px',
        dialogType: 'drawer',
        column: [
          {
            label: '列名',
            prop: 'javaProperty',
            display: false,
          },
          {
            label: '名称',
            prop: 'label',
            display: false,
          },
          {
            label: '类型',
            prop: 'formType',
            type: 'select',
            display: false,
            dicData: formType
          },
          {
            label: '新增',
            prop: 'addDisplay',
            type: 'select',
            display: false,
            dicData: yesNo
          },
          {
            label: '编辑',
            prop: 'editDisplay',
            type: 'select',
            display: false,
            dicData: yesNo
          },
          {
            label: '列表',
            prop: 'hide',
            type: 'select',
            display: false,
            dicData: yesNo
          },
          {
            label: '必填',
            prop: 'required',
            type: 'select',
            display: false,
            dicData: yesNo
          },
          {
            label: '查询',
            prop: 'search',
            type: 'select',
            display: false,
            dicData: yesNo
          },
          {
            label: '查询类型',
            prop: 'searchType',
            type: 'select',
            display: false,
            dicData: searchType
          },
        ],
        group: [
          {
            label: '基本属性',
            prop: 'base',
            column: [
              {
                label: '列名',
                prop: 'javaProperty',
                rules: [
                  { required: true, message: '列名不能为空', trigger: "blur" }
                ]
              },
              {
                label: '名称',
                prop: 'label',
                rules: [
                  { required: true, message: '名称不能为空', trigger: "blur" }
                ]
              },
              {
                label: '类型',
                prop: 'formType',
                type: 'select',
                value: 'TEXT',
                dicData: formType,
                rules: [
                  { required: true, message: '类型不能为空', trigger: "blur" }
                ]
              }
            ],
          },
          {
            label: '页面配置',
            prop: 'page',
            column: [
              {
                label: '新增',
                prop: 'addDisplay',
                type: 'select',
                value: true,
                dicData: yesNo
              },
              {
                label: '编辑',
                prop: 'editDisplay',
                type: 'select',
                value: true,
                dicData: yesNo
              },
              {
                label: '列表',
                prop: 'hide',
                type: 'select',
                value: true,
                dicData: yesNo
              },
              {
                label: '必填',
                prop: 'required',
                type: 'select',
                value: false,
                dicData: yesNo
              },
              {
                label: '查询',
                prop: 'search',
                type: 'select',
                value: false,
                dicData: yesNo
              },
              {
                label: '查询类型',
                prop: 'searchType',
                type: 'select',
                value: 'EQ',
                dicData: searchType
              },
            ],
          },
          {
            label: '扩展信息',
            prop: 'ext',
            column: [
              {
                label: '字典key',
                prop: 'dictKey',
                display: false,
                rules: [
                  { required: true, message: '字典key不能为空', trigger: "blur" }
                ]
              },
              {
                label: '字典url',
                prop: 'dicUrl',
                display: false,
                rules: [
                  { required: true, message: '字典url不能为空', trigger: "blur" }
                ]
              }                    
            ],
          },
        ]
      }
    };
  },
  watch: {
    'columnForm.formType'(value) {
      if(value === 'DICT' || value === 'DB_DICT') {
        let dictKey =  this.findObject(this.option.group[2].column,'dictKey')
        this.$set(dictKey,'display',true)
      } else {
        let dictKey =  this.findObject(this.option.group[2].column,'dictKey')
        this.$set(dictKey,'display',false)
      }
      if(value === 'REMOTE_SELECT') {
        let dicUrl =  this.findObject(this.option.group[2].column,'dicUrl')
        this.$set(dicUrl,'display',true)
      } else {
        let dicUrl =  this.findObject(this.option.group[2].column,'dicUrl')
        this.$set(dicUrl,'display',false)
      }
    }
  },
  computed: {
    content() {
      return JSON.stringify(this.genData,null,2)
    },
    layoutType() {
      if(this.genData.table.layoutType == 'TABLE') {
        return '普通表'
      } else if(this.genData.table.layoutType == 'TREE') {
        return '树型'
      } else if(this.genData.table.layoutType == 'LINK_TREE') {
        return '左树右表'
      } else if(this.genData.table.layoutType == 'LINK') {
        return '父子表'
      }
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    requestData() {
      let data = genService.get()
      this.genData = data
      if(this.genData.table.columns) {
        this.tableData = this.genData.table.columns
      } else {
        this.tableData = []
      }
    },
    // 打开弹窗
    handleOpenDialog(dialogTitle,dialogView) {
      if(dialogView === 'swagger') {
        this.$message.info("开发中……")
        return;
      }
      this.dialogTitle = dialogTitle
      this.dialogView = dialogView
      this.dialogVisible = true;
      this.form = {
        tableName: this.genData.table.tableName,
        moduleName: this.genData.moduleName,
        remark: this.genData.table.remark,
        layoutType: this.genData.table.layoutType
      }
    },
    // 打开抽屉
    openDrawer(title) {
      this.drawerTitle = title
      this.drawer = true
    },
    // 提交表单-加载元数据
    handleSubmit(form,done) {
      genService.getModelTable({
        tableName: this.form.tableName
      }).then(res=>{
        if(res.data.code ===0) {
          this.genData = res.data.data
          this.tableData = res.data.data.table.columns
          genService.save(res.data.data)
          this.dialogVisible = false
        }
        done()
      })
    },
    // 提交表单-修改基本信息
    handleSubmitBase(form,done) {
      genService.saveBaseInfo(form)
      done()
      this.dialogVisible = false
      this.requestData()
    },
    // 弹窗打开前处理事件
      handleBeforeOpen(done, type) {
        if(['view','edit'].includes(type)) {
          this.columnForm = {
            ...this.columnForm,
            ...this.columnForm.ext
          }
          done()
        } else {
          done()
        }
      },
    // 删除行
    handleRowDel(row) {
      if(genService.remove(row)!==-1) {
        this.requestData()
      }
    },
    // 保存行
    handleRowSave(row,done) {
      genService.saveRow(row)
      done()
      this.requestData()
    },
    // 行更新
    handleRowUpdate(row,index,done) {
      genService.updateRow(row,index)
      done()
      this.requestData()
    },
    // 清空
    handleClear() {
      genService.clearData()
      this.requestData()
    },
    // 处理复制
    handleCopy() {
      this.$Clipboard({
          text: this.content
        }).then(() => {
          this.$message.success('复制成功')
        }).catch(() => {
          this.$message.error('复制失败')
        });
    },
  }
};
</script>

<style scoped="scoped" lang="scss">
.m-main{
  padding: 10px;
  .right {
    display: flex;
    justify-content: flex-end;
  }
  .code {
    height: 100%;
    overflow: scroll;
    padding-bottom: 60px;
  }
}
</style>
